<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>工具箱 - 证件照小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <link rel="stylesheet" href="css/global.css" />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        height: 100vh;
        background-color: #f7f7f7;
        overflow: hidden;
      }
      .status-bar {
        height: 44px;
        background-color: #f7f7f7;
        position: relative;
        z-index: 10;
      }
      .bottom-nav {
        border-top: 1px solid #eaeaea;
        background-color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70px;
        padding-bottom: env(safe-area-inset-bottom);
      }
      .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #999;
      }
      .bottom-nav-item.active {
        color: #6366f1;
      }
      .bottom-nav-icon {
        font-size: 24px;
        margin-bottom: 2px;
      }
      .tool-card {
        background-color: white;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        cursor: pointer;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }
      .tool-card:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }
      .tool-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <!-- 状态栏 -->
    <div class="status-bar flex items-center justify-between px-4">
      <div class="text-sm font-medium">工具箱</div>
    </div>

    <!-- 内容区域 -->
    <div class="pb-20 overflow-auto h-full">
      <!-- 工具列表 -->
      <div class="p-4">
        <div class="grid grid-cols-1 gap-4">
          <!-- 背景色更换 -->
          <div class="tool-card">
            <div class="tool-icon bg-purple-100 text-purple-500">
              <i class="fas fa-palette"></i>
            </div>
            <div>
              <h3 class="font-medium text-gray-800">背景色更换</h3>
              <p class="text-xs text-gray-500 mt-1">更换证件照背景颜色</p>
            </div>
            <div class="ml-auto flex items-center h-full">
              <i class="fas fa-chevron-right text-gray-300 text-lg"></i>
            </div>
          </div>

          <!-- 智能抠图 -->
          <div class="tool-card">
            <div class="tool-icon bg-blue-100 text-blue-500">
              <i class="fas fa-cut"></i>
            </div>
            <div>
              <h3 class="font-medium text-gray-800">智能抠图</h3>
              <p class="text-xs text-gray-500 mt-1">一键抠除照片背景</p>
            </div>
            <div class="ml-auto flex items-center h-full">
              <i class="fas fa-chevron-right text-gray-300 text-lg"></i>
            </div>
          </div>

          <!-- 尺寸调整 -->
          <div class="tool-card">
            <div class="tool-icon bg-green-100 text-green-500">
              <i class="fas fa-crop-alt"></i>
            </div>
            <div>
              <h3 class="font-medium text-gray-800">尺寸调整</h3>
              <p class="text-xs text-gray-500 mt-1">调整照片尺寸和比例</p>
            </div>
            <div class="ml-auto flex items-center h-full">
              <i class="fas fa-chevron-right text-gray-300 text-lg"></i>
            </div>
          </div>

          <!-- 美颜修图 -->
          <div class="tool-card">
            <div class="tool-icon bg-pink-100 text-pink-500">
              <i class="fas fa-magic"></i>
            </div>
            <div>
              <h3 class="font-medium text-gray-800">美颜修图</h3>
              <p class="text-xs text-gray-500 mt-1">智能美颜，一键修图</p>
            </div>
            <div class="ml-auto flex items-center h-full">
              <i class="fas fa-chevron-right text-gray-300 text-lg"></i>
            </div>
          </div>

          <!-- 证件照打印 -->
          <div class="tool-card">
            <div class="tool-icon bg-amber-100 text-amber-500">
              <i class="fas fa-print"></i>
            </div>
            <div>
              <h3 class="font-medium text-gray-800">证件照打印</h3>
              <p class="text-xs text-gray-500 mt-1">在线下单，快递到家</p>
            </div>
            <div class="ml-auto flex items-center h-full">
              <i class="fas fa-chevron-right text-gray-300 text-lg"></i>
            </div>
          </div>

          <!-- 证件照规格查询 -->
          <div class="tool-card">
            <div class="tool-icon bg-indigo-100 text-indigo-500">
              <i class="fas fa-search"></i>
            </div>
            <div>
              <h3 class="font-medium text-gray-800">规格查询</h3>
              <p class="text-xs text-gray-500 mt-1">查询各类证件照规格</p>
            </div>
            <div class="ml-auto flex items-center h-full">
              <i class="fas fa-chevron-right text-gray-300 text-lg"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav flex justify-around items-center">
      <a href="home.html" class="bottom-nav-item">
        <i class="fas fa-home bottom-nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="toolbox.html" class="bottom-nav-item active">
        <i class="fas fa-th-large bottom-nav-icon"></i>
        <span>工具箱</span>
      </a>
      <a href="history.html" class="bottom-nav-item">
        <i class="fas fa-history bottom-nav-icon"></i>
        <span>历史</span>
      </a>
      <a href="profile.html" class="bottom-nav-item">
        <i class="fas fa-user bottom-nav-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </body>
</html>
